<template>
  <div class="user-trend-chart">
    <t-loading :loading="loading">
      <div ref="chartRef" class="chart-container"></div>
      <div v-if="!loading && !data.length" class="empty-data">
        <t-empty description="暂无数据" />
      </div>
    </t-loading>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useElementSize } from '@vueuse/core'
import type { TrendData } from '../../../api/statistics'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必需的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer
])

const props = defineProps<{
  data: TrendData[]
  loading: boolean
}>()

const chartRef = ref<HTMLElement | null>(null)
const chart = ref<echarts.ECharts | null>(null)
const { width, height } = useElementSize(chartRef)

// 初始化图表
onMounted(() => {
  if (chartRef.value) {
    chart.value = echarts.init(chartRef.value)
    updateChart()
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)
  }
})

// 组件卸载时清理
onUnmounted(() => {
  if (chart.value) {
    chart.value.dispose()
  }
  window.removeEventListener('resize', handleResize)
})

// 监听数据变化
watch(() => props.data, updateChart, { deep: true })
watch([width, height], handleResize)

// 处理窗口大小变化
const handleResize = () => {
  if (chart.value) {
    chart.value.resize()
  }
}

// 更新图表
const updateChart = () => {
  if (!chart.value || !props.data.length) return
  
  const xAxisData = props.data.map(item => item.date)
  const seriesData = props.data.map(item => item.value)
  
  const option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const data = params[0]
        return `${data.name}<br/>${data.marker}新增用户：${data.value}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: '#E6E6E6'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#E6E6E6',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: seriesData,
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 3,
          color: '#0052D9'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 82, 217, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(0, 82, 217, 0.1)'
            }
          ])
        }
      }
    ]
  }
  
  chart.value.setOption(option)
}
</script>

<style scoped>
.user-trend-chart {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 350px;
}

.empty-data {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 